<template>
  <div style="width: 100px; background: red">
    <input ref="input" type="text" autofocus />
    <div class="content" ref="content" @click="contentClick">
      {{ content }}
    </div>
    <button @click="clickHandler">btn</button>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      content: "在绝大多数情况下，我们最好不要触达另一个组件",
    };
  },
  methods: {
    clickHandler: function () {
      //   console.log(this.$root, this.$root.$data);
      //   $root 访问根组件

      //   this.$root.xx = "yy123";

      //   console.log(this.$parent);
      //   this.$parent 当前组件的父级组件
      //   this.$parent.msg = "hello vue";

      console.log("123", this.$refs.content.offsetHeight);
    },
    contentClick: function () {
      this.content =
        "这里记录的都是和处理边界情况有关的功能，即一些需要对 Vue 的规则做一些小调整的特殊情况。不过注意这些功能都是有劣势或危险的场景的。我们会在每个案例中注明，所以当你使用每个功能的时候请稍加留意。";
      // 改变状态 只是先改变了data的状态 js=>view 是一个异步过程

      //   百度办法
      //   setTimeout(() => {
      //     console.log(this.$refs.content.offsetHeight);
      //   }, 0);

      // 在 DOM 更新完成后被调用
      this.$nextTick(function () {
        console.log(this.$refs.content.offsetHeight);
      });

      //   https://www.jianshu.com/p/bfc3e319a96b
    },
  },
};
</script>

<style>
</style>



<!--
    组件注册 全局注册（基础组件 自动化注册）与局部注册（vue-cli）
    props 子组件不要修改props（会报错） 只能通过$emit 通知父级修改 
    prop的类型验证 String Number Boolean  [String, Number] required: true   default: 100
    验证器
    validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
    }

    自定义事件  组件上使用v-model props传递 value  @监听 input

    将原生事件绑定到组件 .native

    .sync 修饰符  v-bind:count.sync="count"
    v-bind:count="count" @update:count="count = $event"

    插槽  <Xxx>hello</Xxx> 中间hello内容 都会传递到子组件 <slot></slot>
    v-slot 具名插槽


    边界情况

    this.$root  this.$parent 小项目 （大项目很难调试）

    父组件访问元素 & 子组件
    Todos 通过 this.$refs.xxx就可以访问子组件 或者 DOM元素
        TodoAdd  通过 ref="xxx" 给某个取一个名字
        TodoList
        TodoFilter
        <div></div>
    访问DOM主要是用在 表单 媒体 元素（DOM元素对象方法 inputDom.focus()）

    如果要获取DOM的高度属性=> Dom渲染完成之后=> data=>view 异步过程
    Vue.nextTice  this.$nextTick(callback)
    // callback 会等到视图更新之后再调用


    了解概念 不准使用 eventBus(解决兄弟传参 容易乱)   this.$parent


    $forceUpdate（使用就说明有错误 只是改不过来）
-->